<template>

		<view style="display: flex;justify-content: center;">
			<u-tabs :list="tabs"
				:current="itemIndex"

				@click="onTabClick">
			</u-tabs>
		</view>
		
<!-- 		<swiper :style="{height:$device.measure.windowHeight - 54 +'px'}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :duration="200" easing-function="easeOutCubic" :disable-touch="true">
			<swiper-item class="swiper-item">
				
			</swiper-item>
		</swiper> --> 
		<!-- <view @click="showWorkModel=true">HIHIHI</view> -->
		
<!-- 	<view v-if="itemIndex==0" ><recentItem ref="managerItem"></recentItem></view>
		<view v-if="itemIndex==1" ><calendarItem ref="calendarItem"></calendarItem></view>
		<view v-if="itemIndex==2" ><managerItem ref="managerItem"></managerItem></view> -->
		
		<!-- <simple-router-view /> -->
		<simple-router-view v-if="itemIndex==0" name="recent" />
		<simple-router-view v-if="itemIndex==1" name="calendar" />
		<!-- <simple-router-view v-if="itemIndex==2" name="project" /> -->
		
		<u-action-sheet :actions="workActionList" :title="workActionTitle" :show="showWorkAction" :closeOnClickOverlay="true" @close="showWorkAction=false"></u-action-sheet>
		
		<u-modal :negativeTop="350" @confirm="onWorkModelComfirm" :asyncClose="false" :show="showWorkModel" :title="'岗位编辑'" :content="'请编辑信息'" >
			<u--form 
					labelPosition="left"
					:model="workDataFrom"
					:rules="workDataFromRules"
					ref="form1"
					:labelWidth="220"
			>
				<u-form-item
						label="岗位名称"
						prop="name"
						ref="item1"
				>
					<u--input
							v-model="workDataFrom.name"
							placeholder="请输入岗位名称"
							border="surround"
					></u--input>
				</u-form-item>
				
				<!-- 开始时间 -->
				<u-form-item :borderBottom="true" label="开始时间" prop="activityStartDateTime">
					<view @click="showActivityStartDateTimeSel=true"  style="width: 100%;display: flex;justify-content: space-between;">
						<text style="flex:1 0 0;text-align: left;">{{workDataFrom.activityStartDateTime}}</text><u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<!-- 结束时间 -->
				<u-form-item :borderBottom="true" label="结束时间" prop="activityStartDateTime">
					<view  @click="showActivityEndDateTimeSel=true"   style="width: 100%;display: flex;justify-content: space-between;">
						<text style="flex:1 0 0;text-align: left;">{{workDataFrom.activityEndDateTime}}</text><u-icon name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				
				<u-form-item
						label="结算方式"
						prop="userInfo.name"
						ref="item1"
						:borderBottom="true"
				>
					<view @click="showSettleType=true" style="width: 100%;display: flex;">
						<text style="flex:1 0 0;text-align: left;font-weight: bold;">
							{{workDataFrom.settleType}}
						</text>
					</view>
				</u-form-item>
				<u-form-item
						label="工价类型"
						prop="userInfo.name"
						ref="item1"
						:borderBottom="true"
				>
					<view @click="showPriceType=true" style="width: 100%;display: flex;">
						<text style="flex:1 0 0;text-align: left;font-weight: bold;">
							{{priceType[0][workDataFrom.priceType]}}
						</text>
					</view>
				</u-form-item>
				<u-form-item
						label="工价"
						prop="userInfo.name"
						ref="item1"
						:borderBottom="true"
				>
					<view @click="openKeyboard" style="width: 100%;display: flex;justify-content: space-between;">
						<text style="flex:0 0 0;text-align: center;font-weight: bold;">{{workDataFrom.price}}</text>
						<text>元/小时</text>
					</view>
				</u-form-item>
			</u--form>
		</u-modal>
		
		<u-datetime-picker
			title="开始时间"
			:itemHeight="88" 
			:show="showActivityStartDateTimeSel"
			:minDate="$dayjs().add(1,'minute').valueOf()"
			:maxDate="$dayjs().add(1,'year').valueOf()"
			v-model="workDataFrom.activityStartDateTime" 
			mode="time"
			:closeOnClickOverlay="true"
			@confirm="showActivityStartDateTimeSel = false" 
			@cancel="showActivityStartDateTimeSel = false"
			@close="showActivityStartDateTimeSel = false"
		></u-datetime-picker>
		
		<!-- 活动结束日期选择 -->
		<u-datetime-picker
			 title="结束时间"
			:itemHeight="88" 
			:show="showActivityEndDateTimeSel"
			:minDate="$dayjs().add(1,'minute').valueOf()"
			:maxDate="$dayjs().add(1,'year').valueOf()"
			v-model="workDataFrom.activityEndDateTime"
			mode="time"
			:closeOnClickOverlay="true"
			@confirm="showActivityEndDateTimeSel = false"
			@cancel="showActivityEndDateTimeSel = false"
			@close="showActivityEndDateTimeSel = false"
		></u-datetime-picker>
		
		<u-picker 
			title="结算方式" 
			:itemHeight="88" 
			:show="showSettleType" 
			:closeOnClickOverlay="true"
			:columns="settleType" 
			@confirm="(e)=>{workDataFrom.settleType = e.indexs[0];showSettleType=false}"
			@cancel="showSettleType = false"
			@close="showSettleType = false"
		></u-picker>
		
		<u-picker
			title="工价类型" 
			:itemHeight="88" 
			:show="showPriceType" 
			:closeOnClickOverlay="true"
			:columns="priceType" 
			@confirm="(e)=>{workDataFrom.priceType = e.indexs[0];showPriceType=false}"
			@cancel="showPriceType = false"
			@close="showPriceType = false"
		></u-picker>
		
		<keyboard-price ref="keyboard" :isClose="false" type="digit" v-model="workDataFrom.price"></keyboard-price>


</template>
 
<script>
	import keyboardPrice from '@/components/liujto-keyboard/liujto-keyboard-price.vue'
	import workData from '@/utils/data/workData.js'
	import { useUserStore } from '@/stores/user.js'
	
	import tabbs from '@/pages/tabbs/tabbas.vue'
	import {usePageParamStore} from '@/stores/pageParams.js'
	// import managerItem from './swiper-items/manager/manager.vue' 
	// import calendarItem from './swiper-items/calendar/calendar.vue'
	// import recentItem from './swiper-items/recent/recent.vue'
	 
	export default {
		components:{
			// calendarItem,
			// managerItem,
			// recentItem,
		    keyboardPrice,
			// tabbs
		},
		mixins:[
			workData
		],
		setup(){
			const user = useUserStore();
			const pageParam = usePageParamStore()
			
			return {user,pageParam}
		},
		data() {
			return {
				itemIndex : 0,
				tabItem:{
					name: '动态',
					path: 'calendar',
				},
				tabs:[
						{
							name: '动态',
							path: 'recent',
						},
						{
							name: '日程',
							path: 'calendar',
						},
						// {
						// 	name: '项目',
						// 	path: 'project',
						// }
				],
				listenNodes:[],
				itemIndex:0,
				showWorkModel:false,
				showAction: false,
				showPopup:false,
				showPriceType:false,
				showSettleType:false,
				showActivityStartDateTimeSel:false,
				showActivityEndDateTimeSel:false,
				showWorkAction:false,
				
				workDataFrom:{
					name:'',
					activityStartDateTime:'01:00',//this.$dayjs().valueOf(),
					activityEndDateTime: '01:00',//this.$dayjs().add(1,'day').valueOf(),
					settleType:0,
					priceType:0,
					price:'0.00'
				},
				workDataFromRules:{
					name:[
						{
							type:'email',
							required: true,
							min:2,
							max:8,
							message:'就是b通过',
							trigger: ['change','blur']
						}
					],
					activityStartDateTime:[
						{
							required: true,
							validator(rule,value,callback){
								return false;
							},
							message:'就是通过'
						}
					]
				},

				workActionList:[
				{
					name:'设置',
				},
				{
					name: '编辑',
				}
				],
				workActionTitle:'操作',
				options1: [
					{
						text: '编辑',
						style: {
							backgroundColor: '#3c9cff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#ff0509'
						}
					},
				],

				currentStatusIndex: 0,
				swiperCurrent: 0,
				workJobs:[
					{
						name:'西餐厅服务员',
						salary: '16/小时',
						type:'日结',
						num:'9人',
						time:'10:00 - 15:00'
					},
					{
						name:'中餐厅服务员',
						salary: '18/小时',
						type:'日结',
						num:'9人',
						time:'15:00 - 18:00'
					},
					{
						name:'客房',
						salary: '17/小时',
						type:'日结',
						num:'9人',
						time:'18:00 - 22:00'
					}
				]
			}
		},
		onLoad(){
			console.log('99999999999999999999999999999999999 - onLoad')
			
			let nodes = [
				this.$refs.managerItem,
				this.$refs.calendarItem
			]
			
			console.log(nodes)	
		},
		onShow(){
			// console.log('99999999999999999999999999999999999 - onShow')
			
			// this.listenNodes.forEach((node)=>{
			// 	node.onShow ? node.onShow() : void 0;
			// })
		},
		onReady(){
			console.log('99999999999999999999999999999999999 - onReady')
			// this.listenNodes = [
			// 	this.$refs.managerItem,
			// 	this.$refs.calendarItem
			// ]
			 
			// console.log(this.listenNodes)	
			
			// this.listenNodes.forEach((node)=>{
			// 	node.onReady ? node.onReady() : void 0;
			// })
		},
		onReachBottom(){
			console.log('onReachBottom')
			
			// let managerItem = this.$refs.managerItem
			// let calendarItem = this.$refs.calendarItem
			// console.log(calendarItem)
			// console.log(managerItem)
			// console.log(this.$refs)
			
			this.listenNodes.forEach((node)=>{
				node.onReachBottom ? node.onReachBottom() : void 0;
			})
		},
		methods: {
			onTabClick(item){
				this.tabItem = item
				this.itemIndex = item.index
				console.log(this.tabItem)
			},
			openKeyboard(){
				this.$refs.keyboard.open()
			},
			async onWorkModelComfirm(){
				let that = this
				
				this.$refs.form1.setRules(this.workDataFromRules)
				console.log(await this.$refs.form1.validate())
				
				console.log('888');
				// setTimeout(()=>{
				// 	that.showModel = false
				// },1000)
			},
			onClickActionItem(){
				this.$refs.swipeAction.closeOther(null)
				this.showModel = true
			},
			tabChange(item)
			{
				this.currentStatusIndex = item.index;
				//this.swiperCurrent = item.index;
				console.log(this.swiperCurrent)
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				//this.getOrderList(index);
			},
			transition({ detail: { dx } }) {
				//this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				//this.$refs.tabs.setFinishCurrent(current);
				//this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style>
	page {
		background-color: white; 
		/* background-image: linear-gradient(45deg,#fafae6,#fcfaed); */
	}
</style>
